{% load staticfiles %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱博客 | 爱上博客 | www.ibllog.cool</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/static/assets/i/favicon.jpgg">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="/static/assets/i/favicon.jpg">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="/static/assets/i/favicon.jpg">
    <meta name="msapplication-TileColor" content="#0e90d2">
    <link rel="stylesheet" href="/static/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="/static/assets/css/app.css">
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">

</head>

<body id="blog">
<hr>
<nav class="am-g am-g-fixed blog-fixed blog-nav">
    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button"
            data-am-collapse="{target: '#blog-collapse'}"><span class="am-sr-only">导航切换</span> <span
            class="am-icon-bars">博客导航</span></button>

    <div class="am-collapse am-topbar-collapse" id="blog-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav">
            <li class="{{ index_active }}"><a href="/"><span class="am-icon-home">&nbsp;首页</span></a></li>

            <li class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                    <span class="am-icon-leaf" style="{{ category_active }}">&nbsp; {{ category_name }}</span> <span
                        class="am-icon-caret-down" style="{{ category_active }}"></span>
                </a>
                <ul class="am-dropdown-content">
                    {% for category in category_list %}
                        <a href="/article/{{ category }}/">
                            <li class="am-active">{{ category.name }} ({{ category.num_arts }})</li>
                        </a>
                    {% endfor %}
                </ul>
            </li>

            <li class="{{ is_active }}"><a href="{% url 'blog:all_articles' %}">
                <span class="am-icon-archive" style="{{ all_articles_active }}"> 标准文章</span></a>
            </li>
            <li class="{{ is_active }}"><a href="{% url 'blog:img' %}">
                <span class="am-icon-photo" style="{{ all_imgs_active }}"> &nbsp;图片库</span></a>
            </li>
            <li class="{{ is_active }}"><a href="#"><span class="am-icon-link">友链</span></a></li>

        </ul>

        <form class="am-topbar-form am-topbar-right am-form-inline" role="search" method="get"
              action="/search/">
            <div class="am-form-group">
                <input type="text" class="am-form-field am-input-sm" name="search" placeholder="搜索文章标题" required>
            </div>
        </form>

        <div class="am-collapse am-topbar-collapse" id="blog-collapse">
            <ul class="am-topbar-form am-topbar-right am-form-inline">
                <div class="am-nav am-nav-pills am-topbar-nav">

                    {% if user.is_authenticated %}
                        <span>{{ user.username }}</span>
                        <a href="{% url 'blog:logout' %}">
                            <span>Logout</span></a>
                        {% else %}
                        <a href="{% url 'blog:user_login' %}">
                            <span>Login</span></a>
                    {% endif %}

                </div>


            </ul>
        </div>


    </div>
</nav>
<hr style="background: #290ed0;border: none;height: 1px;margin-bottom: 0;">

{% block content %}
    <!-- 内容-->
    　{% endblock %}

<button type="button" id="BackTop" class="toTop-arrow" style="z-index: 100;"></button>
{#<button type="button" id="BackTop" class="am-gotop-icon am-icon-chevron-up" style="z-index: 100;"></button>#}

<footer class="blog-footer">
    <div class="am-g am-g-fixed blog-fixed am-u-sm-centered blog-footer-padding">
        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
            <h3>模板简介</h3>
            <p class="am-text-sm">这是一个使用amazeUI做的简单的前端模板。
                <br> 博客/ 资讯类 前端模板
                <br> 支持响应式，多种布局，包括主页、文章页、媒体页、分类页等
                <br>我是站在了巨人的肩膀上。加油<br><br>
            </p>
        </div>
        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
            <h3>社交账号</h3>
            <p>
                <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1943374299&amp;site=qq&amp;menu=yes" title="QQ"><span
                        class="am-icon-qq am-icon-fw am-primary blog-icon blog-icon"></span></a>
                <a href="https://gitee.com/xiangyang929/" title="my github"><span
                        class="am-icon-github am-icon-fw blog-icon blog-icon"></span></a>
                <a href="https://gitee.com/xiangyang929/" title="我的码云"><span
                        class="am-icon-cloud am-icon-fw blog-icon "></span></a>
                <a href="mailto:1943374299@qq.com" title="发邮件给我"><span
                        class="am-icon-envelope am-icon-fw blog-icon"></span></a>
            </p>
            <h3>小猪给我说</h3>
            <p>生活不易，我们好好努力！</p>
        </div>
        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
            <h3>常用网站</h3>
            <p>
            <ul>

                <li class="am-text-sm">
                    <a href="https://docs.python.org/zh-cn/3/" target="_blank"
                       onclick="MtaH5.clickStat('15',{'2':'https://docs.python.org/zh-cn/3/'})">
                        python 3 中文文档
                    </a>
                </li>

                <li class="am-text-sm">
                    <a href="https://docs.djangoproject.com/en/2.2/" target="_blank"
                       onclick="MtaH5.clickStat('15',{'2':'https://docs.djangoproject.com/en/2.2/'})">
                        Django 2.2 英文文档
                    </a>
                </li>


                <li class="am-text-sm">
                    <a href="https://www.yangqq.com/download/div/" target="_blank"
                       onclick="MtaH5.clickStat('15',{'2':'https://www.yangqq.com/download/div/'})">
                        个人网站模板
                    </a>
                </li>


                <li class="am-text-sm">
                    <a href="https://www.bootcdn.cn/" target="_blank"
                       onclick="MtaH5.clickStat('15',{'2':'https://www.bootcdn.cn/'})">
                        BootCDN
                    </a>
                </li>

                <li class="am-text-sm">
                    <a href="https://v3.bootcss.com/" target="_blank"
                       onclick="MtaH5.clickStat('15',{'2':'https://v3.bootcss.com/'})">
                        Bootstrap
                    </a>
                </li>

                <li class="am-text-sm">
                    <a href="https://cn.vuejs.org/" target="_blank"
                       onclick="MtaH5.clickStat('15',{'2':'https://cn.vuejs.org/'})">
                        Vue
                    </a>
                </li>

            </ul>
            </p>
        </div>
    </div>
    <div class="blog-text-center">© Copyright &copy; zxy 2020
        <br>
        备案号：<a href="http://www.beian.miit.gov.cn/" target="_blank">豫ICP备20007445号-1</a>
    </div>


    <div class="blog-text-center">
        <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279044893'%3E%3C/span%3E%3Cscript " +
            "src='https://v1.cnzz.com/z_stat.php%3Fid%3D1279044893%26online%3D1%26show%3Dline' " +
            "type='text/javascript'%3E%3C/script%3E"));</script>
    </div>

</footer>
<!-- banner end -->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/pinto.min.js"></script>
<script src="/static/assets/js/img.js"></script>
<script>
    // 向上滚动的函数
    $(function () {
        $('#BackTop').click(function () {
            $('html,body').animate({scrollTop: 0}, 500);
        });
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('#BackTop').fadeIn(300);
            } else {
                $('#BackTop').stop().fadeOut(300);
            }
        }).scroll();
    });
</script>

<style>
    /* 按钮边框的大小、位置、样式 */
    .toTop-arrow {
        width: 3.5rem;
        height: 3.5rem;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 33%;
        opacity: 0.7;
        background: black;
        cursor: pointer;
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        display: none;
    }

    /* 绘制按钮中的向上箭头 */
    .toTop-arrow::before, .toTop-arrow::after {
        width: 26px;
        height: 7px;
        border-radius: 2px;
        background: orange;
        position: absolute;
        content: "";

    }

    .toTop-arrow::before {
        transform: rotate(-45deg) translate(0, -50%);
        left: 0.0rem;
    }

    .toTop-arrow::after {
        transform: rotate(45deg) translate(0, -50%);
        right: 0.0rem;
    }

    /* 取消点击按钮时的聚焦 */
    .toTop-arrow:focus {
        outline: none;
    }
</style>
</body>
</html>